<template>
	<view class="private-chat-list">
			<view class="private-chat-text private-chat-text-right"
				v-if="state.UserInfo.ID == props.itemData.msgUserId && props.itemData.chatType == 2">
				<view class="chat-photo">
					<van-image width="34" height="34" round fit="cover" :src="state.UserInfo.Avatar" />
				</view>
				<view class="private-chat-text-box">
					{{ props.itemData.text }}
				</view>
			</view>
			<view class="private-chat-text private-chat-text-left" v-else>
				<view class="chat-photo">
					<van-image width="34" height="34" round fit="cover" :src="props.leftUser.Avatar" />
				</view>
				<view class="private-chat-text-box">
					{{ props.itemData.text }}
				</view>
			</view>
		<!-- 礼物 -->
		<!-- <view class="private-chat-text private-chat-text-left">
            <view class="chat-photo">
                <van-image width="34" height="34" round fit="cover"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            </view>
            <view class="private-chat-gift-box">
                <view class="private-chat-gift-left">
                    <view class="private-chat-gift-title">
                        送你一个棒棒糖
                    </view>
                    <view class="private-chat-gift-button">
                        <img src="@/assets/image/icon80.png"><text>感谢</text>
                    </view>
                </view>
                <view class="private-chat-gift-right">
                    <img src="@/assets/image/giftReview/05.png">
                </view>
            </view>
        </view>
        <view class="private-chat-text private-chat-text-right">
            <view class="chat-photo">
                <van-image width="34" height="34" round fit="cover"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            </view>
            <view class="private-chat-gift-box">
                <view class="private-chat-gift-left">
                    <view class="private-chat-gift-title">
                        送你一个棒棒糖
                    </view>
                    <view class="private-chat-gift-button">
                        查看礼物
                    </view>
                </view>
                <view class="private-chat-gift-right">
                    <img src="@/assets/image/giftReview/05.png">
                </view>
            </view>
        </view>-->
		<!-- 图片 -->
		<template v-if="props.itemData.chatType == 3">
			<view class="private-chat-text private-chat-text-right"
				v-if="state.UserInfo.ID == props.itemData.msgUserId">
				<view class="chat-photo">
					<van-image width="34" height="34" round fit="cover" :src="state.UserInfo.Avatar" />
				</view>
				<view class="private-chat-gift-box">
					<van-image width="120" height="120" fit="cover" :src="props.itemData.file.url" />
				</view>
			</view>
			<view class="private-chat-text private-chat-text-left" v-else>
				<view class="chat-photo">
					<van-image width="34" height="34" round fit="cover" :src="props.leftUser.Avatar" />
				</view>
				<view class="private-chat-gift-box">
					<van-image width="120" height="120" fit="cover" :src="props.itemData.file.url" />
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance,
		onMounted
	} from "vue"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"

	const state = reactive({
		UserInfo: {}
	})

	let userInfo = JSON.parse(getAuthorization("userInfo"))
	state.UserInfo = userInfo
	const props = defineProps(['itemData', 'leftUser'])
</script>

<style lang="scss" scoped>
	.private-chat-list {
		padding: 30rpx 30rpx 10rpx 30rpx;
	}

	.private-chat-text {
		display: flex;
		margin-bottom: 20rpx;
	}

	.private-chat-text-box {
		background: #fff;
		color: #333;
		padding: 20rpx 30rpx;
		line-height: 40rpx;
		border-radius: 0 60rpx 60rpx 60rpx;
	}

	.private-chat-text-left {
		justify-content: flex-start;
	}

	.private-chat-text-right {
		justify-content: flex-start;
		flex-direction: row-reverse;

		.private-chat-text-box {
			background: #333;
			color: #fff;
			margin-right: 20rpx;
			border-radius: 60rpx 0 60rpx 60rpx;
		}
	}

	.chat-photo {
		margin-right: 20rpx;
	}

	.private-chat-gift-box {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx 30rpx;
		border: 1px solid #EAEAEA;
	}

	.private-chat-text {
		.private-chat-gift-button {
			background: #262626;
			line-height: 48rpx;
			height: 48rpx;
			border-radius: 48rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 144rpx;
			font-size: 24rpx;
			margin-top: 20rpx;

			img {
				width: 40rpx;
				margin-right: 10rpx;
			}
		}

		.private-chat-gift-box {
			display: flex;
			align-items: flex-start;

			.private-chat-gift-right {
				margin-left: 20rpx;

				img {
					width: 100rpx;
				}
			}
		}
	}

	.private-chat-text-right {
		.private-chat-gift-box {
			margin-right: 20rpx;

			.private-chat-gift-button {
				background: none;
				color: #999;
				display: inline-block;
			}
		}
	}
</style>
